<template>
  <div class="app">
    <div class="fight">
      <div class="fight_left">
        <div class="item">
          <div class="item_top">
            <p>{{ pos }}</p>
            <el-select v-model="myForm.form1.name" placeholder="选择你的母舰" size="default" clearable>
              <el-option v-for="item in nameData" :key="item" :label="item" :value="item" />
            </el-select>
          </div>
          <div class="item_bottom">
            <div>
              <span>等级</span>
              <el-input v-model.number="myForm.form1.grade" placeholder="请输入等级"
                :disabled="myForm.form1.disabledValue"></el-input>
            </div>
            <div>
              <span>基础比例</span>
              <el-input v-model.number="myForm.form1.basics" placeholder="请输入基础比例"
                :disabled="myForm.form1.disabledValue">
                <template #append>%</template>
              </el-input>
            </div>
            <div>
              <span>能源比例1</span>
              <el-input v-model.number="myForm.form1.energy" placeholder="请输入能源比例"
                :disabled="myForm.form1.disabledValue">
                <template #append>%</template>
              </el-input>
            </div>
            <div>
              <el-popover placement="top-start" :width="200" trigger="click" :content=myForm.form1.probability+myForm.form1.skill_description>
                <template #reference>
                  <el-input v-model="myForm.form1.skill_name" readonly style="width: 100%;"></el-input>
                </template>
              </el-popover>
            </div>
            <div>
              <el-select v-model="myForm.form1.selectValue1" placeholder="选择武器" clearable
                :disabled="myForm.form1.disabledValue">
                <template #header>
                  <div>
                    <el-button type="success" size="small" @click="selectSkillArrFn('全部')">全部</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('普通')">普通</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('被动')">被动</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('指挥')">指挥</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('主动')">主动</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('突击')">突击</el-button>
                  </div>
                  <div style="width: 100%;height: 1px;background-color: #c1c1c1;margin: 10px 0">
                  </div>
                  <div>
                  <span style="display: inline-block;width: 110px;font-size: 16px;">技能ID</span>
                  <span style="display: inline-block;width: 130px;font-size: 16px;">技能名称</span>
                  <span style="display: inline-block;width: 120px;font-size: 16px;">技能类型</span>
                  <span style="display: inline-block;width: 100px; font-size: 16px;">触发概率</span>
                  <span style="display: inline-block;font-size: 16px;">技能描述</span>
                  </div>
                </template>
                <el-option v-for="item in filteredSkillArr" :key="item.id" :label="item.skillName"
                  :value="item.skillName">
                  <span style="width: 100px;display: inline-block;">{{ item.id }}</span>
                  <span style="width: 150px;display: inline-block;">{{ item.skillName }}</span>
                  <span style="width: 100px;display: inline-block;">{{ item.skillType }}</span>
                  <span style="width: 100px;display: inline-block;">{{ item.probability }}</span>
                  <span style="display: inline-block;">{{ item.skillDescription }}</span>
                </el-option>
              </el-select>
            </div>
            <div>
              <el-select v-model="myForm.form1.selectValue2" placeholder="选择武器" clearable
                :disabled="myForm.form1.disabledValue">
                <template #header>
                  <div>
                    <el-button type="success" size="small" @click="selectSkillArrFn('全部')">全部</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('普通')">普通</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('被动')">被动</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('指挥')">指挥</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('主动')">主动</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('突击')">突击</el-button>
                  </div>
                  <div style="width: 100%;height: 1px;background-color: #c1c1c1;margin: 10px 0">
                  </div>
                  <div>
                  <span style="display: inline-block;width: 110px;font-size: 16px;">技能ID</span>
                  <span style="display: inline-block;width: 130px;font-size: 16px;">技能名称</span>
                  <span style="display: inline-block;width: 120px;font-size: 16px;">技能类型</span>
                  <span style="display: inline-block;width: 100px; font-size: 16px;">触发概率</span>
                  <span style="display: inline-block;font-size: 16px;">技能描述</span>
                  </div>
                </template>
                <el-option v-for="item in filteredSkillArr" :key="item.id" :label="item.skillName"
                  :value="item.skillName">
                  <span style="width: 100px;display: inline-block;">{{ item.id }}</span>
                  <span style="width: 150px;display: inline-block;">{{ item.skillName }}</span>
                  <span style="width: 100px;display: inline-block;">{{ item.skillType }}</span>
                  <span style="width: 100px;display: inline-block;">{{ item.probability }}</span>
                  <span style="display: inline-block;">{{ item.skillDescription }}</span>
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="item" v-if="myForm.form2.display">
          <div class="item_top">
            <div class="colse" @click="deletDom(1)">
              <el-popover placement="top-start" trigger="hover" content="删除此战舰">
                <template #reference>
                  <el-icon>
                    <CloseBold />
                  </el-icon>
                </template>
              </el-popover>
            </div>
            <p>{{ pos }}</p>
            <el-select v-model="myForm.form2.name" placeholder="选择你的母舰" size="default" clearable>
              <el-option v-for="item in nameData" :key="item" :label="item" :value="item" /> </el-select>
          </div>
          <div class="item_bottom">
            <div>
              <span>等级</span>
              <el-input v-model.number="myForm.form2.grade" placeholder="请输入等级"
                :disabled="myForm.form2.disabledValue"></el-input>
            </div>
            <div>
              <span>基础比例</span>
              <el-input v-model.number="myForm.form2.basics" placeholder="请输入基础比例"
                :disabled="myForm.form2.disabledValue">
                <template #append>%</template>
              </el-input>
            </div>
            <div>
              <span>能源比例</span>
              <el-input v-model.number="myForm.form2.energy" placeholder="请输入能源比例"
                :disabled="myForm.form2.disabledValue">
                <template #append>%</template>
              </el-input>
            </div>
            <div>

              <el-popover placement="top-start" :width="200" trigger="click" :content=myForm.form2.probability+myForm.form2.skill_description>
                <template #reference>
                  <el-input v-model="myForm.form2.skill_name" readonly style="width: 100%;"></el-input>
                </template>
              </el-popover>
            </div>
            <div>
              <el-select v-model="myForm.form2.selectValue1" placeholder="选择武器" clearable
                :disabled="myForm.form2.disabledValue">
                <template #header>
                  <div>
                    <el-button type="success" size="small" @click="selectSkillArrFn('全部')">全部</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('普通')">普通</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('被动')">被动</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('指挥')">指挥</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('主动')">主动</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('突击')">突击</el-button>
                  </div>
                  <div style="width: 100%;height: 1px;background-color: #c1c1c1;margin: 10px 0">
                  </div>
                  <div>
                  <span style="display: inline-block;width: 110px;font-size: 16px;">技能ID</span>
                  <span style="display: inline-block;width: 130px;font-size: 16px;">技能名称</span>
                  <span style="display: inline-block;width: 120px;font-size: 16px;">技能类型</span>
                  <span style="display: inline-block;width: 100px; font-size: 16px;">触发概率</span>
                  <span style="display: inline-block;font-size: 16px;">技能描述</span>
                  </div>
                </template>
                <el-option v-for="item in filteredSkillArr" :key="item.id" :label="item.skillName"
                  :value="item.skillName">
                  <span style="width: 100px;display: inline-block;">{{ item.id }}</span>
                  <span style="width: 150px;display: inline-block;">{{ item.skillName }}</span>
                  <span style="width: 100px;display: inline-block;">{{ item.skillType }}</span>
                  <span style="width: 100px;display: inline-block;">{{ item.probability }}</span>
                  <span style="display: inline-block;">{{ item.skillDescription }}</span>
                </el-option>
              </el-select>
            </div>
            <div>
              <el-select v-model="myForm.form2.selectValue2" placeholder="选择武器" clearable
                :disabled="myForm.form2.disabledValue">
                <template #header>
                  <div>
                    <el-button type="success" size="small" @click="selectSkillArrFn('全部')">全部</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('普通')">普通</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('被动')">被动</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('指挥')">指挥</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('主动')">主动</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('突击')">突击</el-button>
                  </div>
                  <div style="width: 100%;height: 1px;background-color: #c1c1c1;margin: 10px 0">
                  </div>
                  <div>
                  <span style="display: inline-block;width: 110px;font-size: 16px;">技能ID</span>
                  <span style="display: inline-block;width: 130px;font-size: 16px;">技能名称</span>
                  <span style="display: inline-block;width: 120px;font-size: 16px;">技能类型</span>
                  <span style="display: inline-block;width: 100px; font-size: 16px;">触发概率</span>
                  <span style="display: inline-block;font-size: 16px;">技能描述</span>
                  </div>
                </template>
                <el-option v-for="item in filteredSkillArr" :key="item.id" :label="item.skillName"
                  :value="item.skillName">
                  <span style="width: 100px;display: inline-block;">{{ item.id }}</span>
                  <span style="width: 150px;display: inline-block;">{{ item.skillName }}</span>
                  <span style="width: 100px;display: inline-block;">{{ item.skillType }}</span>
                  <span style="width: 100px;display: inline-block;">{{ item.probability }}</span>
                  <span style="display: inline-block;">{{ item.skillDescription }}</span>
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="item" v-if="myForm.form3.display">
          <div class="item_top">
            <div class="colse" @click="deletDom(2)">
              <el-popover placement="top-start" trigger="hover" content="删除此战舰">
                <template #reference>
                  <el-icon>
                    <CloseBold />
                  </el-icon>
                </template>
              </el-popover>
            </div>
            <p>{{ pos }}</p>
            <el-select v-model="myForm.form3.name" placeholder="选择你的母舰" size="default" clearable>
              <el-option v-for="item in nameData" :key="item" :label="item" :value="item" /> </el-select>
          </div>
          <div class="item_bottom">
            <div>
              <span>等级</span>
              <el-input v-model.number="myForm.form3.grade" placeholder="请输入等级"
                :disabled="myForm.form3.disabledValue"></el-input>
            </div>
            <div>
              <span>基础比例</span>
              <el-input v-model.number="myForm.form3.basics" placeholder="请输入基础比例"
                :disabled="myForm.form3.disabledValue">
                <template #append>%</template>
              </el-input>
            </div>
            <div>
              <span>能源比例</span>
              <el-input v-model.number="myForm.form3.energy" placeholder="请输入能源比例"
                :disabled="myForm.form3.disabledValue">
                <template #append>%</template>
              </el-input>
            </div>
            <div>
              <el-popover placement="top-start" :width="200" trigger="click" :content=myForm.form3.probability+myForm.form3.skill_description>
                <template #reference>
                  <el-input v-model="myForm.form3.skill_name" readonly style="width: 100%;"></el-input>
                </template>
              </el-popover>
            </div>
            <div>
              <el-select v-model="myForm.form3.selectValue1" placeholder="选择武器" clearable
                :disabled="myForm.form3.disabledValue">
                <template #header>
                  <div>
                    <el-button type="success" size="small" @click="selectSkillArrFn('全部')">全部</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('普通')">普通</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('被动')">被动</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('指挥')">指挥</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('主动')">主动</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('突击')">突击</el-button>
                  </div>
                  <div style="width: 100%;height: 1px;background-color: #c1c1c1;margin: 10px 0">
                  </div>
                  <div>
                  <span style="display: inline-block;width: 110px;font-size: 16px;">技能ID</span>
                  <span style="display: inline-block;width: 130px;font-size: 16px;">技能名称</span>
                  <span style="display: inline-block;width: 120px;font-size: 16px;">技能类型</span>
                  <span style="display: inline-block;width: 100px; font-size: 16px;">触发概率</span>
                  <span style="display: inline-block;font-size: 16px;">技能描述</span>
                  </div>
                </template>
                <el-option v-for="item in filteredSkillArr" :key="item.id" :label="item.skillName"
                  :value="item.skillName">
                  <span style="width: 100px;display: inline-block;">{{ item.id }}</span>
                  <span style="width: 150px;display: inline-block;">{{ item.skillName }}</span>
                  <span style="width: 100px;display: inline-block;">{{ item.skillType }}</span>
                  <span style="width: 100px;display: inline-block;">{{ item.probability }}</span>
                  <span style="display: inline-block;">{{ item.skillDescription }}</span>
                </el-option>
              </el-select>
            </div>
            <div>
              <el-select v-model="myForm.form3.selectValue2" placeholder="选择武器" clearable
                :disabled="myForm.form3.disabledValue">
                <template #header>
                  <div>
                    <el-button type="success" size="small" @click="selectSkillArrFn('全部')">全部</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('普通')">普通</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('被动')">被动</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('指挥')">指挥</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('主动')">主动</el-button>
                    <el-button type="primary" size="small" @click="selectSkillArrFn('突击')">突击</el-button>
                  </div>
                  <div style="width: 100%;height: 1px;background-color: #c1c1c1;margin: 10px 0">
                  </div>
                  <div>
                  <span style="display: inline-block;width: 110px;font-size: 16px;">技能ID</span>
                  <span style="display: inline-block;width: 130px;font-size: 16px;">技能名称</span>
                  <span style="display: inline-block;width: 120px;font-size: 16px;">技能类型</span>
                  <span style="display: inline-block;width: 100px; font-size: 16px;">触发概率</span>
                  <span style="display: inline-block;font-size: 16px;">技能描述</span>
                  </div>
                </template>
                <el-option v-for="item in filteredSkillArr" :key="item.id" :label="item.skillName"
                  :value="item.skillName">
                  <span style="width: 100px;display: inline-block;">{{ item.id }}</span>
                  <span style="width: 150px;display: inline-block;">{{ item.skillName }}</span>
                  <span style="width: 100px;display: inline-block;">{{ item.skillType }}</span>
                  <span style="width: 100px;display: inline-block;">{{ item.probability }}</span>
                  <span style="display: inline-block;">{{ item.skillDescription }}</span>
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div v-if="addDom" class="add" @click="addDomFun(myForm)">
          <el-popover placement="top-start" trigger="hover" content="新增战舰">
            <template #reference>
              <el-icon :size="64">
                <Plus />
              </el-icon>
            </template>
          </el-popover>
        </div>
      </div>
      <div class="fight_center">VS</div>
      <div class="fight_right">
        <div class="item">
          <div class="item_top">
            <p>{{ pos }}</p>
            <el-select v-model="enemyForm.form1.name" placeholder="选择你的母舰" size="default" clearable>
              <el-option v-for="item in enemyNameData" :key="item" :label="item" :value="item" />
            </el-select>
          </div>
          <div class="item_bottom">
            <div>
              <span>等级</span>
              <el-input v-model.number="enemyForm.form1.grade" placeholder="请输入等级"
                :disabled="enemyForm.form1.disabledValue"></el-input>
            </div>
            <div>
              <span>基础比例</span>
              <el-input v-model.number="enemyForm.form1.basics" placeholder="请输入基础比例"
                :disabled="enemyForm.form1.disabledValue">
                <template #append>%</template>
              </el-input>
            </div>
            <div>
              <span>能源比例</span>
              <el-input v-model.number="enemyForm.form1.energy" placeholder="请输入能源比例"
                :disabled="enemyForm.form1.disabledValue">
                <template #append>%</template>
              </el-input>
            </div>
            <div>
              <el-popover placement="top-start" :width="200" trigger="click" :content=enemyForm.form1.probability+enemyForm.form1.skill_description>
                <template #reference>
                  <el-input v-model="enemyForm.form1.skill_name" readonly style="width: 100%;"></el-input>
                </template>
              </el-popover>
            </div>
            <div>
              <el-select v-model="enemyForm.form1.selectValue1" placeholder="选择武器" clearable
                :disabled="enemyForm.form1.disabledValue">
                <template #header>
                  <div>
                    <el-button type="success" size="small" @click="selectEnemySkillArrFn('全部')">全部</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('普通')">普通</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('被动')">被动</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('指挥')">指挥</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('主动')">主动</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('突击')">突击</el-button>
                  </div>
                  <div style="width: 100%;height: 1px;background-color: #c1c1c1;margin: 10px 0">
                  </div>
                  <div>
                  <span style="display: inline-block;width: 110px;font-size: 16px;">技能ID</span>
                  <span style="display: inline-block;width: 130px;font-size: 16px;">技能名称</span>
                  <span style="display: inline-block;width: 120px;font-size: 16px;">技能类型</span>
                  <span style="display: inline-block;width: 100px; font-size: 16px;">触发概率</span>
                  <span style="display: inline-block;font-size: 16px;">技能描述</span>
                  </div>
                </template>
                <el-option v-for="item in filteredEnemySkillArr" :key="item.id" :label="item.skillName"
                  :value="item.skillName">
                  <span style="width: 100px;display: inline-block;">{{ item.id }}</span>
                  <span style="width: 150px;display: inline-block;">{{ item.skillName }}</span>
                  <span style="width: 100px;display: inline-block;">{{ item.skillType }}</span>
                  <span style="width: 100px;display: inline-block;">{{ item.probability }}</span>
                  <span style="display: inline-block;">{{ item.skillDescription }}</span>
                </el-option>
              </el-select>
            </div>
            <div>
              <el-select v-model="enemyForm.form1.selectValue2" placeholder="选择武器" clearable
                :disabled="enemyForm.form1.disabledValue">
                <template #header>
                  <div>
                    <el-button type="success" size="small" @click="selectEnemySkillArrFn('全部')">全部</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('普通')">普通</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('被动')">被动</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('指挥')">指挥</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('主动')">主动</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('突击')">突击</el-button>
                  </div>
                  <div style="width: 100%;height: 1px;background-color: #c1c1c1;margin: 10px 0">
                  </div>
                  <div>
                  <span style="display: inline-block;width: 110px;font-size: 16px;">技能ID</span>
                  <span style="display: inline-block;width: 130px;font-size: 16px;">技能名称</span>
                  <span style="display: inline-block;width: 120px;font-size: 16px;">技能类型</span>
                  <span style="display: inline-block;width: 100px; font-size: 16px;">触发概率</span>
                  <span style="display: inline-block;font-size: 16px;">技能描述</span>
                  </div>
                </template>
                <el-option v-for="item in filteredEnemySkillArr" :key="item.id" :label="item.skillName"
                  :value="item.skillName">
                  <span style="width: 100px;display: inline-block;">{{ item.id }}</span>
                  <span style="width: 150px;display: inline-block;">{{ item.skillName }}</span>
                  <span style="width: 100px;display: inline-block;">{{ item.skillType }}</span>
                  <span style="width: 100px;display: inline-block;">{{ item.probability }}</span>
                  <span style="display: inline-block;">{{ item.skillDescription }}</span>
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="item" v-if="enemyForm.form2.display">
          <div class="item_top">
            <div class="colse" @click="deletDom(3)">
              <el-popover placement="top-start" trigger="hover" content="删除此战舰">
                <template #reference>
                  <el-icon>
                    <CloseBold />
                  </el-icon>
                </template>
              </el-popover>
            </div>
            <p>{{ pos }}</p>
            <el-select v-model="enemyForm.form2.name" placeholder="选择你的母舰" size="default" clearable>
              <el-option v-for="item in enemyNameData" :key="item" :label="item" :value="item" />
            </el-select>
          </div>
          <div class="item_bottom">
            <div>
              <span>等级</span>
              <el-input v-model.number="enemyForm.form2.grade" placeholder="请输入等级"
                :disabled="enemyForm.form2.disabledValue"></el-input>
            </div>
            <div>
              <span>基础比例</span>
              <el-input v-model.number="enemyForm.form2.basics" placeholder="请输入基础比例"
                :disabled="enemyForm.form2.disabledValue">
                <template #append>%</template>
              </el-input>
            </div>
            <div>
              <span>能源比例</span>
              <el-input v-model.number="enemyForm.form2.energy" placeholder="请输入能源比例"
                :disabled="enemyForm.form2.disabledValue">
                <template #append>%</template>
              </el-input>
            </div>
            <div>
              <el-popover placement="top-start" :width="200" trigger="click" :content=enemyForm.form2.probability+enemyForm.form2.skill_description>
                <template #reference>
                  <el-input v-model="enemyForm.form2.skill_name" readonly style="width: 100%;"></el-input>
                </template>
              </el-popover>
            </div>
            <div>
              <el-select v-model="enemyForm.form2.selectValue1" placeholder="选择武器" clearable
                :disabled="enemyForm.form2.disabledValue">
                <template #header>
                  <div>
                    <el-button type="success" size="small" @click="selectEnemySkillArrFn('全部')">全部</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('普通')">普通</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('被动')">被动</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('指挥')">指挥</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('主动')">主动</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('突击')">突击</el-button>
                  </div>
                  <div style="width: 100%;height: 1px;background-color: #c1c1c1;margin: 10px 0">
                  </div>
                  <div>
                  <span style="display: inline-block;width: 110px;font-size: 16px;">技能ID</span>
                  <span style="display: inline-block;width: 130px;font-size: 16px;">技能名称</span>
                  <span style="display: inline-block;width: 120px;font-size: 16px;">技能类型</span>
                  <span style="display: inline-block;width: 100px; font-size: 16px;">触发概率</span>
                  <span style="display: inline-block;font-size: 16px;">技能描述</span>
                  </div>
                </template>
                <el-option v-for="item in filteredEnemySkillArr" :key="item.id" :label="item.skillName"
                  :value="item.skillName">
                  <span style="width: 100px;display: inline-block;">{{ item.id }}</span>
                  <span style="width: 150px;display: inline-block;">{{ item.skillName }}</span>
                  <span style="width: 100px;display: inline-block;">{{ item.skillType }}</span>
                  <span style="width: 100px;display: inline-block;">{{ item.probability }}</span>
                  <span style="display: inline-block;">{{ item.skillDescription }}</span>
                </el-option>
              </el-select>
            </div>
            <div>
              <el-select v-model="enemyForm.form2.selectValue2" placeholder="选择武器" clearable
                :disabled="enemyForm.form2.disabledValue">
                <template #header>
                  <div>
                    <el-button type="success" size="small" @click="selectEnemySkillArrFn('全部')">全部</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('普通')">普通</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('被动')">被动</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('指挥')">指挥</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('主动')">主动</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('突击')">突击</el-button>
                  </div>
                  <div style="width: 100%;height: 1px;background-color: #c1c1c1;margin: 10px 0">
                  </div>
                  <div>
                  <span style="display: inline-block;width: 110px;font-size: 16px;">技能ID</span>
                  <span style="display: inline-block;width: 130px;font-size: 16px;">技能名称</span>
                  <span style="display: inline-block;width: 120px;font-size: 16px;">技能类型</span>
                  <span style="display: inline-block;width: 100px; font-size: 16px;">触发概率</span>
                  <span style="display: inline-block;font-size: 16px;">技能描述</span>
                  </div>
                </template>
                <el-option v-for="item in filteredEnemySkillArr" :key="item.id" :label="item.skillName"
                  :value="item.skillName">
                  <span style="width: 100px;display: inline-block;">{{ item.id }}</span>
                  <span style="width: 150px;display: inline-block;">{{ item.skillName }}</span>
                  <span style="width: 100px;display: inline-block;">{{ item.skillType }}</span>
                  <span style="width: 100px;display: inline-block;">{{ item.probability }}</span>
                  <span style="display: inline-block;">{{ item.skillDescription }}</span>
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="item" v-if="enemyForm.form3.display">
          <div class="item_top">
            <div class="colse" @click="deletDom(4)">
              <el-popover placement="top-start" trigger="hover" content="删除此战舰">
                <template #reference>
                  <el-icon>
                    <CloseBold />
                  </el-icon>
                </template>
              </el-popover>
            </div>
            <p>{{ pos }}</p>
            <el-select v-model="enemyForm.form3.name" placeholder="选择你的母舰" size="default" clearable>
              <el-option v-for="item in enemyNameData" :key="item" :label="item" :value="item" />
            </el-select>
          </div>
          <div class="item_bottom">
            <div>
              <span>等级</span>
              <el-input v-model.number="enemyForm.form3.grade" placeholder="请输入等级"
                :disabled="enemyForm.form3.disabledValue"></el-input>
            </div>
            <div>
              <span>基础比例</span>
              <el-input v-model.number="enemyForm.form3.basics" placeholder="请输入基础比例"
                :disabled="enemyForm.form3.disabledValue">
                <template #append>%</template>
              </el-input>
            </div>
            <div>
              <span>能源比例</span>
              <el-input v-model.number="enemyForm.form3.energy" placeholder="请输入能源比例"
                :disabled="enemyForm.form3.disabledValue">
                <template #append>%</template>
              </el-input>
            </div>
            <div>
              <el-popover placement="top-start" :width="200" trigger="click" :content=enemyForm.form3.probability+enemyForm.form3.skill_description>
                <template #reference>
                  <el-input v-model="enemyForm.form3.skill_name" readonly style="width: 100%;"></el-input>
                </template>
              </el-popover>
            </div>
            <div>
              <el-select v-model="enemyForm.form3.selectValue1" placeholder="选择武器" clearable
                :disabled="enemyForm.form3.disabledValue">
                <template #header>
                  <div>
                    <el-button type="success" size="small" @click="selectEnemySkillArrFn('全部')">全部</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('普通')">普通</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('被动')">被动</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('指挥')">指挥</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('主动')">主动</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('突击')">突击</el-button>
                  </div>
                  <div style="width: 100%;height: 1px;background-color: #c1c1c1;margin: 10px 0">
                  </div>
                  <div>
                  <span style="display: inline-block;width: 110px;font-size: 16px;">技能ID</span>
                  <span style="display: inline-block;width: 130px;font-size: 16px;">技能名称</span>
                  <span style="display: inline-block;width: 120px;font-size: 16px;">技能类型</span>
                  <span style="display: inline-block;width: 100px; font-size: 16px;">触发概率</span>
                  <span style="display: inline-block;font-size: 16px;">技能描述</span>
                  </div>
                </template>
                <el-option v-for="item in filteredEnemySkillArr" :key="item.id" :label="item.skillName"
                  :value="item.skillName">
                  <span style="width: 100px;display: inline-block;">{{ item.id }}</span>
                  <span style="width: 150px;display: inline-block;">{{ item.skillName }}</span>
                  <span style="width: 100px;display: inline-block;">{{ item.skillType }}</span>
                  <span style="width: 100px;display: inline-block;">{{ item.probability }}</span>
                  <span style="display: inline-block;">{{ item.skillDescription }}</span>
                </el-option>
              </el-select>
            </div>
            <div>
              <el-select v-model="enemyForm.form3.selectValue2" placeholder="选择武器" clearable
                :disabled="enemyForm.form3.disabledValue">
                <template #header>
                  <div>
                    <el-button type="success" size="small" @click="selectEnemySkillArrFn('全部')">全部</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('普通')">普通</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('被动')">被动</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('指挥')">指挥</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('主动')">主动</el-button>
                    <el-button type="primary" size="small" @click="selectEnemySkillArrFn('突击')">突击</el-button>
                  </div>
                  <div style="width: 100%;height: 1px;background-color: #c1c1c1;margin: 10px 0">
                  </div>
                  <div>
                  <span style="display: inline-block;width: 110px;font-size: 16px;">技能ID</span>
                  <span style="display: inline-block;width: 130px;font-size: 16px;">技能名称</span>
                  <span style="display: inline-block;width: 120px;font-size: 16px;">技能类型</span>
                  <span style="display: inline-block;width: 100px; font-size: 16px;">触发概率</span>
                  <span style="display: inline-block;font-size: 16px;">技能描述</span>
                  </div>
                </template>
                <el-option v-for="item in filteredEnemySkillArr" :key="item.id" :label="item.skillName"
                  :value="item.skillName">
                  <span style="width: 100px;display: inline-block;">{{ item.id }}</span>
                  <span style="width: 150px;display: inline-block;">{{ item.skillName }}</span>
                  <span style="width: 100px;display: inline-block;">{{ item.skillType }}</span>
                  <span style="width: 100px;display: inline-block;">{{ item.probability }}</span>
                  <span style="display: inline-block;">{{ item.skillDescription }}</span>
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div v-if="addEnemyDom" class="add" @click="addDomFun(enemyForm)">
          <el-popover placement="top-start" trigger="hover" content="新增战舰">
            <template #reference>
              <el-icon :size="64">
                <Plus />
              </el-icon>
            </template>
          </el-popover>
        </div>
      </div>
    </div>
    <div class="change_env">
      <button @click="switchProxy('http://172.20.212.125:4966/')" title="http://172.20.212.125:4966/">Yige</button>
      <button @click="switchProxy('http://172.20.213.160:4966/')" title="http://172.20.213.160:4966/">Chenhan</button>
      <button @click="switchProxy('http://52.25.195.150:4966/')" title="http://52.25.195.150:4966/">QA</button>
      <button @click="switchProxy('http://172.20.213.164/')" title="http://172.20.213.164/">SuPeng</button>

      <p>现在的环境在：{{ env }}</p>
    </div>
    <div class="but">
      <el-button type="success" @click="beginFight" size="large">开始战斗</el-button>
    </div>
    <div class="result" v-loading="loading">
      <p> {{ resultView.result }}</p>
      <h3 v-if="resultView.attack_list.length > 0">我方数值：</h3>

      <ul>
        <li v-for="(value, index) in resultView.attack_list" :key="index">
          {{ value }}
        </li>
      </ul>

      <h3 v-if="resultView.defense_list.length > 0">敌方数值：</h3>
      <ul>
        <li v-for="(value, index) in resultView.defense_list" :key="index">
          {{ value }}
        </li>
      </ul>
      <h3 v-if="resultView.reports.length > 0">报告：</h3>
      <p v-html="resultView.reports"></p>

    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, watch,nextTick ,watchEffect} from 'vue'
import { fightData,skillParamList } from './api/index'
import { ElMessage } from 'element-plus'
import * as XLSX from 'xlsx'
import { setProxy, getProxy } from './envUtils';
const nameData = ref([])
const enemyNameData = ref([])
let addDom = ref(false)
let addEnemyDom = ref(false)
let pos = '选择母舰'
let filteredSkillArr  = ref([])
let filteredEnemySkillArr = ref([])
let paramsGrowth = ref([])
const resultView = reactive({
  result: '',
  reports: '',
  attack_list: [],
  defense_list: []
})
const myForm = reactive({
  form1: {
    name: null,
    ms_id: null,
    grade: 100,
    basics: 170,
    energy: 100,
    skill: null,
    skill_name: '',
    skill_description: '',
    selectValue1: '',
    selectValue2: '',
    weapon_id_1: 0,
    weapon_id_2: 0,
    pos: null,
    disabledValue: true,
    probability:''
  },
  form2: {
    name: null,
    ms_id: null,
    grade: 100,
    basics: 170,
    energy: 100,
    skill: null,
    selectValue1: '',
    selectValue2: '',
    skill_name: '',
    skill_description: '',
    weapon_id_1: 0,
    weapon_id_2: 0,
    pos: null,
    disabledValue: true,
    display: true,
    probability:''

  },
  form3: {
    name: null,
    ms_id: null,
    grade: 100,
    basics: 170,
    energy: 100,
    skill: null,
    skill_name: '',
    skill_description: '',
    selectValue1: '',
    selectValue2: '',
    weapon_id_1: 0,
    weapon_id_2: 0,
    pos: null,
    disabledValue: true,
    display: true,
    probability:''

  },

})
const enemyForm = reactive({
  form1: {
    name: null,
    ms_id: null,
    grade: 100,
    basics: 170,
    energy: 100,
    skill: null,
    skill_name: '',
    skill_description: '',
    selectValue1: '',
    weapon_id_1: 0,
    weapon_id_2: 0,
    selectValue2: '',
    pos: null,
    disabledValue: true,
    probability:''

  },
  form2: {
    name: null,
    ms_id: null,
    grade: 100,
    basics: 170,
    energy: 100,
    skill: null,
    skill_name: '',
    skill_description: '',
    selectValue1: '',
    selectValue2: '',
    weapon_id_1: 0,
    weapon_id_2: 0,
    pos: null,
    disabledValue: true,
    display: true,
    probability:''

  },
  form3: {
    name: null,
    ms_id: null,
    grade: 100,
    basics: 170,
    energy: 100,
    skill: null,
    skill_name: '',
    skill_description: '',
    selectValue1: '',
    selectValue2: '',
    weapon_id_1: 0,
    weapon_id_2: 0,
    pos: null,
    disabledValue: true,
    display: true,
    probability:''

  },
})
let loading = ref(false)
const modelArr = ref([])
const weaponArr = ref([])
const selectSkillArr = ref([])
const selectEnemySkillArr = ref([])
const fightEffect = ref([])
let env = ref('')
Object.keys(myForm).forEach(formKey => {//遍历键名数组，通过键名访问键值
  watch(
    () => myForm[formKey].name,
    (newValue, oldValue) => {
      if (oldValue) {
        const oldIndex = nameData.value.indexOf(oldValue)
        if (oldIndex === -1) {
          nameData.value.push(oldValue)
        }
      }
      if (newValue !== undefined) {

        myForm[formKey].disabledValue = false
        const newIndex = nameData.value.indexOf(newValue)
        if (newIndex !== -1) {
          nameData.value.splice(newIndex, 1)
        }
        modelArr.value.forEach(item => {
          if (item.STR_ms_remark === newValue) {
            let weapon_id = item.INT_id
            weaponArr.value.forEach((item) => {
              if (item.INT_id === weapon_id) {
                myForm[formKey].skill_name = item.str_name_comment
                myForm[formKey].skill_description = item.str_comment
                myForm[formKey].probability = item.probability
              }
            })
            myForm[formKey].skill = item.INT_id
            selectSkillArr.value = selectSkillArr.value.filter((item) => {
              return item.id !== myForm[formKey].skill
            })
            filteredSkillArr.value = [...selectSkillArr.value]

          }
        });
        myForm[formKey].selectValue1 = ''
        myForm[formKey].selectValue2 = ''
      } else {
        myForm[formKey].disabledValue = true
        myForm[formKey].skill = null
        myForm[formKey].skill_name = ''
        myForm[formKey].skill_description = ''
        myForm[formKey].probability = ''

      }
    }
  )
})
Object.keys(myForm).forEach(formKey => {
  watch(
    () => myForm[formKey].selectValue1,
    (newValue, oldValue) => {
      if (newValue) {
        selectSkillArr.value = selectSkillArr.value.filter((item) => {
          return item.skillName !== newValue
        })
        filteredSkillArr.value = [...selectSkillArr.value]
      }
      if (oldValue) {
      let oldObj = weaponArr.value.filter(obj => obj.str_name_comment === oldValue);        
      oldObj = oldObj.map(item => {
        return {
          id: item.INT_id,
          skillName: item.str_name_comment,
          skillDescription: item.str_comment,
          probability: item.probability,
          skillType: item.int_skill_type === 1 ? '普通' :
               item.int_skill_type === 2 ? '被动' :
               item.int_skill_type === 3 ? '指挥' :
               item.int_skill_type === 4 ? '主动' : '突击',
        }
      })        
        selectSkillArr.value.push(...oldObj)
        filteredSkillArr.value = [...selectSkillArr.value]
      }
    }
  );
  watch(
    () => myForm[formKey].selectValue2,
    (newValue, oldValue) => {
      if (newValue) {
        selectSkillArr.value = selectSkillArr.value.filter((item) => {
          return item.skillName !== newValue
        })
        filteredSkillArr.value = [...selectSkillArr.value]
      }
      if (oldValue) {
      let oldObj = weaponArr.value.filter(obj => obj.str_name_comment === oldValue);        
      oldObj = oldObj.map(item => {
        return {
          id: item.INT_id,
          skillName: item.str_name_comment,
          skillDescription: item.str_comment,
          probability: item.probability,
          skillType: item.int_skill_type === 1 ? '普通' :
               item.int_skill_type === 2 ? '被动' :
               item.int_skill_type === 3 ? '指挥' :
               item.int_skill_type === 4 ? '主动' : '突击',

        }
      })        
        selectSkillArr.value.push(...oldObj)
        filteredSkillArr.value = [...selectSkillArr.value]
      }
    }
  );
});
Object.keys(enemyForm).forEach(formKey => {
  watch(
    () => enemyForm[formKey].name,
    (newValue, oldValue) => {

      if (oldValue) {
        const oldIndex = enemyNameData.value.indexOf(oldValue)
        if (oldIndex === -1) {
          enemyNameData.value.push(oldValue)
        }
      }
      if (newValue !== undefined) {
        enemyForm[formKey].disabledValue = false

        const newIndex = enemyNameData.value.indexOf(newValue)
        if (newIndex !== -1) {
          enemyNameData.value.splice(newIndex, 1)
        }
        modelArr.value.forEach(item => {
          if (item.STR_ms_remark === newValue) {
            let weapon_id = item.INT_id
            weaponArr.value.forEach((item) => {
              if (item.INT_id === weapon_id) {
                enemyForm[formKey].skill_name = item.str_name_comment
                enemyForm[formKey].skill_description = item.str_comment
                enemyForm[formKey].probability = item.probability
              }
            })
            enemyForm[formKey].skill = item.INT_id
            selectEnemySkillArr.value = selectEnemySkillArr.value.filter((item) => {
              return item.id !== enemyForm[formKey].skill
            })
            filteredEnemySkillArr.value = [...selectEnemySkillArr.value]

          }
        });
        enemyForm[formKey].selectValue1 = ''
        enemyForm[formKey].selectValue2 = ''
      } else {
        enemyForm[formKey].disabledValue = true
        enemyForm[formKey].skill = null
        enemyForm[formKey].skill_name = ''
        enemyForm[formKey].skill_description = ''
        enemyForm[formKey].probability = ''

      }
    }
  )
})
Object.keys(enemyForm).forEach(formKey => {
  watch(
    () => enemyForm[formKey].selectValue1,
    (newValue, oldValue) => {
      if (newValue) {
        selectEnemySkillArr.value = selectEnemySkillArr.value.filter((item) => {
          return item.skillName !== newValue
        })
        filteredEnemySkillArr.value = [...selectEnemySkillArr.value]
      }
      if (oldValue) {
        let oldObj = weaponArr.value.filter(obj => obj.str_name_comment === oldValue);        
      oldObj = oldObj.map(item => {
        return {
          id: item.INT_id,
          skillName: item.str_name_comment,
          skillDescription: item.str_comment,
          probability: item.probability,
          skillType: item.int_skill_type === 1 ? '普通' :
               item.int_skill_type === 2 ? '被动' :
               item.int_skill_type === 3 ? '指挥' :
               item.int_skill_type === 4 ? '主动' : '突击',

        }
      }) 
        selectEnemySkillArr.value.push(...oldObj)
        filteredEnemySkillArr.value = [...selectEnemySkillArr.value]
      }
    }
  );
  watch(
    () => enemyForm[formKey].selectValue2,
    (newValue, oldValue) => {
      if (newValue) {
        selectEnemySkillArr.value = selectEnemySkillArr.value.filter((item) => {
          return item.skillName !== newValue
        })
        filteredEnemySkillArr.value = [...selectEnemySkillArr.value]
      }
      if (oldValue) {
        let oldObj = weaponArr.value.filter(obj => obj.str_name_comment === oldValue);        
      oldObj = oldObj.map(item => {
        return {
          id: item.INT_id,
          skillName: item.str_name_comment,
          skillDescription: item.str_comment,
          probability: item.probability,
          skillType: item.int_skill_type === 1 ? '普通' :
               item.int_skill_type === 2 ? '被动' :
               item.int_skill_type === 3 ? '指挥' :
               item.int_skill_type === 4 ? '主动' : '突击',
        }
      }) 
        selectEnemySkillArr.value.push(...oldObj)
        filteredEnemySkillArr.value = [...selectEnemySkillArr.value]
      }
    }
  );
});
const skillParamListArr = ref([])
onMounted(() => {
  getNameData()//母舰name
  env.value = localStorage.getItem('VITE_API_BASE_URL')
  skillParamList().then((res) => {
    skillParamListArr.value = res.data
    getFightEttectData()//技能name
    getreaponName()//武器name
  })
})

const getNameData = async () => {
  const response = await fetch('./ms_model_server.xls')
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`)
  }
  const arrayBuffer = await response.arrayBuffer()
  const data = new Uint8Array(arrayBuffer)
  const workbook = XLSX.read(data, { type: 'array' })
  const sheetName = workbook.SheetNames[0]
  const worksheet = workbook.Sheets[sheetName]
  const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 2 })
  modelArr.value = jsonData
  nameData.value = jsonData.map((item) => {
    return item.STR_ms_remark
  })
  enemyNameData.value = jsonData.map((item) => {
    return item.STR_ms_remark
  })
}
const getreaponName = async () => {
  const response = await fetch('./ms_fight_skill_server.xls')
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`)
  }
  const arrayBuffer = await response.arrayBuffer()
  const data = new Uint8Array(arrayBuffer)
  const workbook = XLSX.read(data, { type: 'array' })
  const sheetName = workbook.SheetNames[0]
  const worksheet = workbook.Sheets[sheetName]
  let jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 2 })
  jsonData = jsonData.map((item) => {
    let probability = 0
    probability = item.int_probability + (10 - 1) * item.int_probability_growth / 10
    item.probability = `${(probability / 10).toFixed(1)}%`
    item.str_comment = `${item.str_comment}`;
    return item
  })
  
  // //处理数据
  // console.log(skillParamListArr.value);
  jsonData.forEach((item)=>{
      const matches = item.term_condition_effect_list.match(/\[(\d+)\]/g);
      item.growth_id = matches ? matches.map(match => parseInt(match.replace(/[\[\]]/g, ''))) : [];
      if(item.term_effect_list !== "[]"){
        const matches = item.term_effect_list.match(/\d+/g);
        const result = matches ? matches.map(Number) : [];     
        item.growth_id = item.growth_id.concat(result);
        item.growth_id = item.growth_id.filter((item) => {
          return item !== undefined
        })
    }
  })
  for (let i = 0; i < jsonData.length; i++) {
  if (jsonData[i].growth_id.length > 0) {
    jsonData[i].growth_id = jsonData[i].growth_id.map(growthId => {
      const match = paramsGrowth.value.find(param => param.id === growthId);
      return match ? match : null;
    }).filter(growthId => growthId !== null);
  }
}
//   for (let i = 0; i < jsonData.length; i++) {
//   const growthIds = jsonData[i].growth_id;
//   if (growthIds.length > 0) {
//     for (let j = 0; j < skillParamListArr.value.length; j++) {
//       const skillParam = skillParamListArr.value[j];
//       if (skillParam.param_list.length > 0 && jsonData[i].INT_id === skillParam.skill_id) {
//         const paramList = skillParam.param_list;
//         const lastIndex = paramList.length - 1;
//         const secondLastIndex = paramList.length - 3;
//         if (growthIds.length === 1) {
//           paramList[lastIndex] += growthIds[0].params_growth * 8;
//         } else {
//           paramList[lastIndex] += growthIds[growthIds.length - 1].params_growth * 8;
//           paramList[secondLastIndex] += growthIds[growthIds.length - 2].params_growth * 8;
//         }
//       }
//     }
//   }
// }

  for(let i = 0;i<skillParamListArr.value.length;i++){
    for(let j = 0;j<skillParamListArr.value[i].param_list.length;j++){
      let paramList = skillParamListArr.value[i].param_list;
        let uniqueParamList = [...new Set(paramList)];
        skillParamListArr.value[i].param_list = uniqueParamList;
    }
  }
  for (let i = 0; i < jsonData.length; i++) {
  for (let j = 0; j < skillParamListArr.value.length; j++) {
    if (jsonData[i].INT_id === skillParamListArr.value[j].skill_id) {
      skillParamListArr.value[j].param_list = skillParamListArr.value[j].param_list.slice(1, skillParamListArr.value[j].param_list.length).filter((item) => {
        return item !== 1000;
      });
      // if(jsonData[i].growth_id.length > 0){
      //   skillParamListArr.value[j].param_list = skillParamListArr.value[j].param_list.map((item,index)=>{
      //     item = item + (jsonData[i].growth_id[index].params_growth)*8;
      //     return item
      //   })
      // }

      let str = jsonData[i].str_comment;
      let paramList = skillParamListArr.value[j].param_list;
      let placeholders = str.match(/<num\d*>%?/g) || [];
      placeholders.forEach((placeholder, index) => {
        let valueToReplace;
        if (paramList.length === 1) {
          valueToReplace = paramList[0];
        } else if (index < paramList.length) {
          valueToReplace = paramList[index];
        } else {
          valueToReplace = '';
        }        
        if (placeholder.endsWith('%')) {
          valueToReplace = `${(valueToReplace / 10).toFixed(1)}%`;
        } else {
          valueToReplace = valueToReplace.toString();
        }

        str = str.replace(placeholder, valueToReplace);
      });
      jsonData[i].str_comment = `${jsonData[i].str_commen},${str}`.replace(/undefined,/g, '');
    }
  }
}
  weaponArr.value = jsonData  
  
  const mapWeaponToSkill = (item) => {
  return {
    skillName: item.str_name_comment,
    skillDescription: item.str_comment,
    id: item.INT_id,
    probability: item.probability,
    skillType: item.int_skill_type === 1 ? '普通' :
               item.int_skill_type === 2 ? '被动' :
               item.int_skill_type === 3 ? '指挥' :
               item.int_skill_type === 4 ? '主动' : '突击',
  };
};

selectSkillArr.value = weaponArr.value.map(mapWeaponToSkill);
filteredSkillArr.value = selectSkillArr.value;
selectEnemySkillArr.value = weaponArr.value.map(mapWeaponToSkill);
filteredEnemySkillArr.value = selectEnemySkillArr.value;
}
const getFightEttectData = async () => {
  const response = await fetch('./ms_fight_effect_server.xls')
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`)
  }
  const arrayBuffer = await response.arrayBuffer()
  const data = new Uint8Array(arrayBuffer)
  const workbook = XLSX.read(data, { type: 'array' })
  const sheetName = workbook.SheetNames[0]
  const worksheet = workbook.Sheets[sheetName]
  const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 2 })
  fightEffect.value = jsonData
  paramsGrowth.value = jsonData
  .filter(item => {
    return item.term_param_growth !== "[]";
  })
  .map(item => {
    const match = item.term_param_growth.match(/\d+/g);
    const result = match ? match[1] : null;
    return {
      id: item.int_id,
      params_growth: Number(result)
    };
  });
}

function switchProxy(newProxy) {
  setProxy(newProxy);
}

function beginFight() {
  loading.value = true
  let myPosCounter = 1;
  let enemyPosCounter = 1;
  let attack_list = []
  let defense_list = []
  for (let key in myForm) {
    if (myForm[key].name) {
      if (myForm[key].pos === null) {
        myForm[key].pos = myPosCounter;
      }
      myPosCounter++;
    }
    attack_list.push(myForm[key])
  }
  for (let key in enemyForm) {
    if (enemyForm[key].name) {
      if (enemyForm[key].pos === null) {
        enemyForm[key].pos = enemyPosCounter;
      }
      enemyPosCounter++;
    }
    defense_list.push(enemyForm[key])
  }

  for (let i = 0; i < attack_list.length; i++) {
    for (let j = 0; j < weaponArr.value.length; j++) {
      if (attack_list[i].selectValue1 === weaponArr.value[j].str_name_comment) {
        attack_list[i].weapon_id_1 = weaponArr.value[j].INT_id
      }
      if (attack_list[i].selectValue2 === weaponArr.value[j].str_name_comment) {
        attack_list[i].weapon_id_2 = weaponArr.value[j].INT_id
      }
    }
    for (let k = 0; k < modelArr.value.length; k++) {
      if (attack_list[i].name === modelArr.value[k].STR_ms_remark) {
        attack_list[i].ms_id = modelArr.value[k].INT_id
      }
    }
  }
  for (let i = 0; i < defense_list.length; i++) {
    for (let j = 0; j < weaponArr.value.length; j++) {
      if (defense_list[i].selectValue1 === weaponArr.value[j].str_name_comment) {
        defense_list[i].weapon_id_1 = weaponArr.value[j].INT_id
      }
      if (defense_list[i].selectValue2 === weaponArr.value[j].str_name_comment) {
        defense_list[i].weapon_id_2 = weaponArr.value[j].INT_id
      }
    }
    for (let k = 0; k < modelArr.value.length; k++) {
      if (defense_list[i].name === modelArr.value[k].STR_ms_remark) {
        defense_list[i].ms_id = modelArr.value[k].INT_id
      }
    }
  }
  attack_list = attack_list.map((item) => {
    return {
      ms_id: item.ms_id,
      weapon_id_1: item.weapon_id_1,
      weapon_id_2: item.weapon_id_2,
      pos: item.pos,
      attribute_ratio: item.basics,
      electric_ratio: item.energy,
      level: item.grade
    }
  })
  defense_list = defense_list.map((item) => {
    return {
      ms_id: item.ms_id,
      weapon_id_1: item.weapon_id_1,
      weapon_id_2: item.weapon_id_2,
      pos: item.pos,
      attribute_ratio: item.basics,
      electric_ratio: item.energy,
      level: item.grade
    }
  })
  attack_list = attack_list.filter((item) => {
    return item.ms_id !== null
  })
  defense_list = defense_list.filter((item) => {
    return item.ms_id !== null
  })
  if (attack_list.length > 0 && defense_list.length > 0) {
    fightData({ attack_list, defense_list }).then((res) => {
      loading.value = false
      resultView.result = res.data.result === 1 ? '进攻方胜利' : res.data.result === 2 ? '防守方胜利' : '平局'
      resultView.reports = res.data.reports
      resultView.reports = resultView.reports.replace(/\n/g, '<br>');
      resultView.attack_list = res.data.attack_list
      resultView.defense_list = res.data.defense_list
    })
  } else {
    loading.value = false
    ElMessage.error('敌我双方至少都要有一个母舰才能开启对战！！！')
  }
}
//delete
function deletDom(data) {
  if (data === 1) {
    myForm.form2.display = false
    myForm.form2.name = null
    addDom.value = true
  } else if (data === 2) {
    myForm.form3.display = false
    myForm.form3.name = null
    addDom.value = true
  } else if (data === 3) {
    enemyForm.form2.display = false
    enemyForm.form2.name = null
    addEnemyDom.value = true
  } else if (data === 4) {
    enemyForm.form3.display = false
    enemyForm.form3.name = null
    addEnemyDom.value = true
  }
}
function addDomFun(form) {
  if (form === myForm) {
    for (let key in form) {
      if (form[key].display === false) {
        form[key].display = true
        break
      }
    }
    addDom.value = form.form3.display ? false : true
  } else {
    for (let key in form) {
      if (form[key].display === false) {
        form[key].display = true
        break
      }
    }
    addEnemyDom.value = form.form3.display ? false : true
  }
}
const selectSkillArrFn = async (type) => {
  if (type !== '全部') {
    filteredSkillArr.value = selectSkillArr.value.filter(item => item.skillType === type);
  } else {
    filteredSkillArr.value = selectSkillArr.value;
  }
  await nextTick();
};

const selectEnemySkillArrFn = async (type) => {
  if (type !== '全部') {
    filteredEnemySkillArr.value = selectEnemySkillArr.value.filter(item => item.skillType === type);
  } else {
    filteredEnemySkillArr.value = selectEnemySkillArr.value;
  }
  await nextTick();
};
</script>

<style scoped lang="scss">
.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90vw;
  margin: auto;
  border: 1px solid #000;

  .fight {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    position: sticky;
    top: 0px;
    z-index: 999;
    background-color: #fff;

    .fight_left {
      border: 1px solid #000;
      width: 45%;
      height: 500px;
      margin: 1rem;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .item {
        width: 25%;
        height: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .item_top {
          width: 80%;
          height: 40%;
          border: 1px solid #000;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          position: relative;
          border-radius: 5px;

          .colse {
            position: absolute;
            top: 0px;
            right: 0px;
            cursor: pointer;
            padding: 10px;
            transition: 0.3s;

            &:hover {
              color: #f56c6c;

            }
          }

          p {
            font-size: 20px;
            font-weight: bold;
          }

          .el-select {
            width: 80%;
          }
        }

        .item_bottom {
          width: 100%;
          height: 50%;

          div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 1rem;

            .el-input {
              width: 60%;
              margin: 0;
            }

            .el-select {
              width: 100%;
              margin: 0;
            }
          }
        }
      }
    }

    .fight_center {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 64px;
      font-weight: bold
    }

    .fight_right {
      border: 1px solid #000;
      width: 45%;
      height: 500px;
      margin: 1rem;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .item {
        width: 25%;
        height: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .item_top {
          width: 80%;
          height: 40%;
          border: 1px solid #000;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          position: relative;
          border-radius: 5px;

          .colse {
            position: absolute;
            top: 0px;
            right: 0px;
            cursor: pointer;
            padding: 10px;
            transition: 0.3s;

            &:hover {
              color: #f56c6c;
            }
          }

          P {
            font-size: 20px;
            font-weight: bold;
          }

          .el-select {
            width: 80%;
          }
        }

        .item_bottom {
          width: 100%;
          height: 50%;

          div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 1rem;

            .el-input {
              width: 60%;
              margin: 0;
            }

            .el-select {
              width: 100%;
              margin: 0;
            }
          }
        }
      }
    }
  }

  .but {
    margin-bottom: 1rem;
  }

  .result {
    width: 100%;
    margin: 0 1rem;
    display: flex;
    flex-direction: column;
    border: 1px solid #000;
    border-bottom: none;

    p {
      padding: 0 1rem;
      margin: 0;
    }

    h3 {
      margin: 0;
    }

    p:nth-child(1) {
      font-size: 2rem;
      text-align: center;
      font-weight: 700;
      padding: 1rem;
    }
  }
}

:deep(.el-select__wrapper) {
  width: 100%;
}

.add {
  cursor: pointer;
}

.change_env {
  button {
    margin: 0 1rem;
    width: 80px;
    height: 30px;
    border: none;
    border-radius: 25px;
    background-color: #409eff;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    transition: 0.3s;

    &:hover {
      background-color: #66b1ff;
      transform: scale(0.9);
      border: 1px solid #92bae5;
    }
  }
}

:deep(.el-scrollbar__view.el-select-dropdown__list.el-select-dropdown__item) {
  height: 70px !important;
}
</style>